<template>
  <div class="scheme-manage-card">
    <el-card :body-style="{ padding: '0px'}" shadow="hover" >
      <div class="image-box flex-row-center">
<!--        图片-->
        <y-image
            class="image"
            :src="scheme.imagesrc"></y-image>
<!--        图片面罩-->
        <div class="image-mask flex-col-center" @click="handleApply">
          <div>
            使用
            <el-icon><Position /></el-icon>
          </div>
        </div>
      </div>
      <div style="padding: 14px">
        <span>{{scheme.schemeName}}</span>
        <el-space wrap alignment="center" >
          <el-button text  @click="handleEditScheme">
            <el-icon color="#663AB7">
              <Edit></Edit>
            </el-icon>
          </el-button>
          <el-button text  @click="handleDetailScheme">
            <el-icon color="#01213F">
              <MoreFilled></MoreFilled>
            </el-icon>
          </el-button>
          <el-popconfirm title="确定删除此方案?"
                         confirm-button-text="确定"
                         cancel-button-text="取消"
                         @confirm="handleDeleteScheme">
            <template #reference>
              <el-button text >
                <el-icon color="#E95223">
                  <Delete></Delete>
                </el-icon>
              </el-button>
            </template>
          </el-popconfirm>
          <el-button text  @click="handleCollectionScheme" >
            <el-icon color="#FCA651">
              <component :is="computedCollectionIcon"></component>
            </el-icon>
          </el-button>
<!--          <el-button text color="yellow" :icon="StarFilled" v-show="scheme.collection"></el-button>-->
          <el-button text  @click="handleShareScheme">
            <el-icon color="#4AC285">
            <Share></Share>
            </el-icon>
          </el-button>
          <el-button text @click="handleClickStatus" >
            <el-icon color="#366ACE">
              <component :is="computedSchemeStatus"></component>
            </el-icon>
          </el-button>
        </el-space>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import {Delete, Edit, MoreFilled, Share} from "@element-plus/icons-vue";
import {computed, defineEmits, defineProps} from "vue";

import YImage from "@/components/img/YImage.vue";
import {Position} from "@element-plus/icons";
import {SchemeStatus} from "@/ts/scheme";


export interface SchemeManageCardType{
  id:string
  schemeName:string
  collection:boolean
  imagesrc:string,
  schemeStatus:SchemeStatus
}

let props = defineProps<{
  scheme: SchemeManageCardType
}>()
let emit = defineEmits<{
  (e:"apply",val:SchemeManageCardType):void
  (e:"detail",val:SchemeManageCardType):void
  (e:"edit",val:SchemeManageCardType):void
  (e:"delete",val:SchemeManageCardType):void
  (e:"share",val:SchemeManageCardType):void
  (e:"status",val:SchemeManageCardType):void
  (e:"collection",val:SchemeManageCardType):void
}>()

let computedCollectionIcon=computed(()=>{

  return props.scheme.collection?'StarFilled':'Star'
})

let computedSchemeStatus=computed(()=>{
  switch (props.scheme.schemeStatus){
    case SchemeStatus.PUBLIC:return 'View'
    case SchemeStatus.PRIVATE:return 'Hide'
    default:return 'Lock'
  }
})
function handleApply() {
  emit("apply",props.scheme)
}
function handleDeleteScheme() {
  emit("delete", props.scheme)
}
function handleCollectionScheme() {
  emit("collection",props.scheme)
}
function handleShareScheme(){
  emit("share",props.scheme)
}
function handleEditScheme() {
  emit("edit", props.scheme)
}

function handleDetailScheme() {
  emit("detail", props.scheme)
}
function handleClickStatus(){
  emit("status", props.scheme)
}
</script>

<style scoped lang="less">
.scheme-manage-card {
  width: 200px;
  height: fit-content;
  .image-box{
    position: relative;
    width: 200px;
    height: 200px;
    cursor: pointer;
    overflow:hidden;
    .image{
      z-index: 1;
    }
    .image-mask{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      background-color: black;
      color: whitesmoke;
      opacity: 0;
      transition: all 0.3s;
      caret-color: transparent;
    }
    &:hover{
      .image-mask{
        opacity: 0.8;
      }
    }
  }


}

</style>